<#include "/inc.ftl"/>
<body>
<div style="top: 30%;left: 22%;position: absolute;width: 50%">
    <form action="/loginController/loginSystem" method="post">
        <div class="form row">
            <div class="form-horizontal col-md-offset-3" id="login_form">
                <h3 class="form-title" style="color: white">欢迎登录</h3>
                <div class="col-md-9">
                    <div class="form-group">
                        <i class="fa fa-user fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="用户名" id="userName"
                               name="userName" autofocus="autofocus" maxlength="20"/>
                    </div>
                    <div class="form-group">
                        <i class="fa fa-lock fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="密码" id="password"
                               name="password" maxlength="8"/>
                    </div>
                    <div class="form-group">
                        <div style="color: white;left: 30%;position: absolute">
                            <span style="font-size: 20px">${errorMsg!}</span>
                        </div>
                    </div>

                    <div class="form-group col-md-offset-9">
                        <#--<button type="button" class="btn btn-success ">忘记密码</button>-->
                        <button type="submit" class="btn btn-success pull-right" name="submit">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>

<style type="text/css">
    body {
        background: url("/images/base/backgrounds/loginPage1.jpg");
        animation-name: myfirst;
        animation-duration: 12s;
        /*变换时间*/
        animation-delay: 2s;
        /*动画开始时间*/
        animation-iteration-count: infinite;
        /*下一周期循环播放*/
        animation-play-state: running;
        /*动画开始运行*/
    }

    @keyframes myfirst {
        0% {
            background: url("/images/base/backgrounds/loginPage1.jpg");
        }
        34% {
            background: url("/images/base/backgrounds/loginPage2.jpg");
        }
        67% {
            background: url("/images/base/backgrounds/loginPage3.jpg");
        }
        100% {
            background: url("/images/base/backgrounds/loginPage4.jpg");
        }
    }

    /*阴影*/
    .fa {
        display: inline-block;
        top: 27px;
        left: 6px;
        position: relative;
        color: #ccc;
    }

    input[type="text"], input[type="password"] {
        padding-left: 26px;
    }
</style>